<template>
  <Head title="" isBack>
    <template #content>
      <DateTab
        :tabData="data.formData"
        @data="getTab"
        @changeDate="getTab"
        ref="dateTabRef"
      ></DateTab>
      <div class="company-info">
        <div class="info-item">企业名称：{{ data.companyData.orgName }}</div>
        <div class="info-item">组织机构代码：{{ data.companyData.code }}</div>
      </div>
      <div class="edit-line"></div>
      <!-- <div class="card">
        <div class="icon-top"></div>
        <div class="card-content com-head-wrap1">
          <div class="card-data">
            <div class="card-item">
              <div class="right">
                <div class="card-title">充电业务</div>
              </div>
            </div>
            <div class="card-item">
              <div class="right">
                <div class="card-title">充电电量（度）</div>
                <div class="card-title">
                  {{
                    data.detailData.totalPower
                      ? formatNumber(data.detailData.totalPower)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="card-item">
              <div class="right">
                <div class="card-title">服务费（元）</div>
                <div class="card-title">
                  {{
                    data.detailData.totalServiceMoney
                      ? formatNumber(data.detailData.totalServiceMoney)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="card-item">
              <div class="right">
                <div class="card-title">电费（元）</div>
                <div class="card-title">
                  {{
                    data.detailData.totalElecMoney
                      ? formatNumber(data.detailData.totalElecMoney)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="card-item">
              <div class="right">
                <div class="card-title">订单金额（元）</div>
                <div class="card-title">
                  {{
                    data.detailData.totalAmount
                      ? formatNumber(data.detailData.totalAmount)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="card-item">
              <div class="right">
                <div class="card-title">优惠抵扣（元）</div>
                <div class="card-title">
                  {{
                    data.detailData.totalDiscounts
                      ? formatNumber(data.detailData.totalDiscounts)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="card-item">
              <div class="right">
                <div class="card-title">实收金额（元）</div>
                <div class="card-title">
                  {{
                    data.detailData.actualAmount
                      ? formatNumber(data.detailData.actualAmount)
                      : '--'
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="icon-bottom"></div>
      </div> -->
      <div class="line-card">
        <div class="right-card">
          <div class="dividend-title">
            <div class="card-title">充电业务</div>
          </div>
          <div class="charge-data">
            <div class="charge-data-item">
              <div class="charge-info">
                <div class="card-title">充电电量（度）</div>
                <div class="info">
                  {{
                    data.detailData.totalPower
                      ? formatNumber(data.detailData.totalPower)
                      : '--'
                  }}
                </div>
              </div>
              <div class="charge-info">
                <div class="card-title">服 务 费 （元）</div>
                <div class="info">
                  {{
                    data.detailData.totalServiceMoney
                      ? formatNumber(data.detailData.totalServiceMoney)
                      : '--'
                  }}
                </div>
              </div>
              <div class="charge-info">
                <div class="card-title">电 费 （元）</div>
                <div class="info">
                  {{
                    data.detailData.totalElecMoney
                      ? formatNumber(data.detailData.totalElecMoney)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="charge-data-item charge-data-item1">
              <div class="charge-info">
                <div class="card-title">订单金额（元）</div>
                <div class="info">
                  {{
                    data.detailData.totalAmount
                      ? formatNumber(data.detailData.totalAmount)
                      : '--'
                  }}
                </div>
              </div>
              <div class="charge-info">
                <div class="card-title">优惠抵扣（元）</div>
                <div class="info">
                  {{
                    data.detailData.totalDiscounts
                      ? formatNumber(data.detailData.totalDiscounts)
                      : '--'
                  }}
                </div>
              </div>
              <div class="charge-info">
                <div class="card-title">实收金额（元）</div>
                <div class="info">
                  {{
                    data.detailData.actualAmount
                      ? formatNumber(data.detailData.actualAmount)
                      : '--'
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="left-card">
          <div class="dividend-title">
            <div class="card-title">超时占用</div>
          </div>
          <div class="charge-info">
            <div class="card-title">订单计费（元）</div>
            <div class="info">
              {{
                data.detailData1.sumTotalAmount
                  ? formatNumber(data.detailData1.sumTotalAmount)
                  : '--'
              }}
            </div>
          </div>
          <div class="charge-info">
            <div class="card-title">实收金额（元）</div>
            <div class="info">
              {{
                data.detailData1.sumActualAmount
                  ? formatNumber(data.detailData1.sumActualAmount)
                  : '--'
              }}
            </div>
          </div>
        </div>
      </div>
      <el-tabs
        v-model="data.activeTab"
        class="demo-tabs"
        @tab-click="handleClickTab"
      >
        <el-tab-pane label="电桩充电汇总" name="station">
          <Table
            ref="tableRef"
            v-show="data.activeTab === 'station'"
            :columns="data.columns"
            :toolbar="data.toolbar"
            @get-list="getData"
          >
          </Table>
        </el-tab-pane>
        <el-tab-pane label="充电订单" name="order">
          <Table
            v-if="data.activeTab === 'order'"
            ref="tableStationRef"
            :columns="orderData.columns"
            :toolbar="orderData.toolbar"
            @get-list="getOrderData"
          ></Table
        ></el-tab-pane>
        <el-tab-pane label="超时占用订单" name="occupy">
          <Table
            v-if="data.activeTab === 'occupy'"
            ref="tableOccupyRef"
            :columns="occupyData.columns"
            :toolbar="occupyData.toolbar"
            @get-list="getOccupyData"
          ></Table
        ></el-tab-pane>
      </el-tabs>
    </template>
  </Head>
</template>
      
<script lang="ts" setup name="stationFinancialDetail">
import Head from '@/components/head/index.vue';
import Table from '@/components/table/index.vue';
import DateTab from '@/components/dateTab/index.vue';
import { queryDicByParent } from '@/service/apis/api';
import {
  pagingStationTotalSeq,
  pagingOperatorEquipmentInfo,
  getStationTotalInfo,
  queryOrgConfig,
  EXPORT_OPERATOREQUIPMENTINFO,
  EXPORT_STATINTOTALSEQ,
  getOccupyTotalInfo,
  pagingOperaOccupy,
  EXPORT_OPERAOCCUPY,
} from '@/service/apis/financial';
import { formatNumber, exportFile } from '@/utils/utils';

const router = useRouter();
const route = useRoute();

const tableRef = ref();
const tableStationRef = ref();
const dateTabRef = ref();
const tableOccupyRef = ref();

const {
  query: { id, timeType, time },
} = route;

const data = reactive({
  isOne: true,
  activeProfitTab: '',
  dataList: [] as any,
  detailData: {} as any,
  detailData1: {} as any,
  companyData: {} as any,
  activeTab: 'station',
  formData: {} as any,
  shareProfitId: '',
  type: 0,
  columns: [
    {
      prop: 'equipmentCode',
      label: '电桩编号',
    },
    {
      prop: 'equipmentName',
      label: '电桩名称',
    },
    {
      prop: 'stationName',
      label: '归属电站',
    },
    {
      prop: 'power',
      label: '功率（kW）',
      dataType: String,
    },
    {
      prop: 'totalPower',
      label: '充电电量',
      dataType: String,
    },
    {
      prop: 'count',
      label: '充电次数',
      dataType: String,
    },
    {
      prop: 'totalElecMoney',
      label: '电费',
      dataType: String,
    },
    {
      prop: 'totalServiceMoney',
      label: '服务费',
      dataType: String,
    },
    {
      prop: 'totalAmount',
      label: '订单金额',
      dataType: String,
    },
    {
      prop: 'totalDiscounts',
      label: '优惠抵扣',
      dataType: String,
    },
    {
      prop: 'actualAmount',
      label: '实收金额',
      dataType: String,
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'financialOverviewList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(EXPORT_OPERATOREQUIPMENTINFO, '电桩充电汇总', data.formData);
      },
    },
  ],
});
const orderData = reactive({
  columns: [
    {
      prop: 'startChargeSeq',
      label: '订单编号',
    },
    {
      prop: 'orgName',
      label: '用户归属企业',
    },
    {
      prop: 'startTime',
      label: '充电开始时间',
    },
    {
      prop: 'endTime',
      label: '充电结束时间',
    },
    {
      prop: 'totalPower',
      label: '充电电量',
      dataType: String,
    },
    {
      prop: 'totalElecMoney',
      label: '电费',
      dataType: String,
    },
    {
      prop: 'totalServiceMoney',
      label: '服务费',
      dataType: String,
    },
    {
      prop: 'totalAmount',
      label: '订单金额',
      dataType: String,
    },
    {
      prop: 'totalDiscounts',
      label: '优惠抵扣',
      dataType: String,
    },
    {
      prop: 'actualAmount',
      label: '实收金额',
      dataType: String,
    },
    {
      prop: 'chargeSource',
      label: '订单类型',
      dic: [] as any,
      type: Number,
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'financialOverviewList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(
          EXPORT_STATINTOTALSEQ,
          `充电订单列表（${data.companyData.orgName}）`,
          data.formData
        );
      },
    },
  ],
});
const occupyData = reactive({
  columns: [
    {
      prop: 'orderId',
      label: '占用订单号',
      width: 260,
    },
    {
      prop: 'orgName',
      label: '用户归属企业',
    },
    {
      prop: 'orgType',
      label: '是否实际扣费',
      dic: [] as any,
      type: Number,
    },
    {
      prop: 'stationName',
      label: '电站名称',
    },
    // {
    //   prop: 'connectorName',
    //   label: '占用终端名称',
    // },
    {
      prop: 'connectorId',
      label: '占用终端编码',
    },
    {
      prop: 'durationHours',
      label: '占用时长',
    },

    {
      prop: 'oughtAmount',
      label: '订单计费',
    },
    {
      prop: 'amount',
      label: '占用收费',
      template: (row: any, index: number) => {
        if (row.amount) {
          return `${row.amount}元`;
        } else if (row.amount == 0) {
          return `${row.amount}元`;
        } else {
          return '--';
        }
      },
    },
    {
      prop: 'chargeSource',
      label: '订单来源',
      dic: [] as any,
      type: Number,
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'financialOverviewList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(EXPORT_OPERAOCCUPY, '运营商占用订单', data.formData);
      },
    },
  ],
});

const handleClickTab = (e: any) => {
  console.log(e.props.name);
  if (e.props.name === 'order') {
    data.type = 1;
    tableStationRef.value?.handleQuery();
  } else if (e.props.name === 'occupy') {
    data.type = 2;
    tableOccupyRef.value?.handleQuery();
  } else {
    data.type = 0;
    tableRef.value?.handleQuery();
  }
};

const getTab = (value: any) => {
  if (data.isOne) {
    value.time = time;
    value.timeType = timeType;
    data.isOne = false;
  }

  data.formData = Object.assign(data.formData, value);
  getStationInfo();

  if (data.type === 0) {
    tableRef.value?.handleQuery();
  } else if (data.type === 2) {
    tableOccupyRef.value?.handleQuery();
  } else {
    tableStationRef.value?.handleQuery();
  }
};

const getStationInfo = () => {
  console.log('data.formData===', data.formData);
  data.formData = Object.assign(data.formData, { operatorTotalId: id });
  getStationTotalInfo(data.formData).then((res: any) => {
    if (res) {
      data.detailData = res;
    } else {
      data.detailData = {};
    }
  });
  getOccupyTotalInfo(data.formData).then((res: any) => {
    if (res) {
      data.detailData1 = res;
    } else {
      data.detailData1 = {};
    }
  });
};

const getData = (page: any, search: any) => {
  data.formData = Object.assign(data.formData, {
    operatorTotalId: id,
    equipmentGroup: '1',
  });
  console.log('formData======', data.formData);

  pagingOperatorEquipmentInfo(data.formData, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getData(page, search);
        return;
      }
      nextTick(() => {
        tableRef?.value.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
};

const getOrderData = (page: any, search: any) => {
  data.formData = Object.assign(data.formData, {
    operatorTotalId: id,
    chargeSeqGroup: '1',
  });
  pagingStationTotalSeq(data.formData, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getOrderData(page, search);
        return;
      }
      nextTick(() => {
        tableStationRef.value.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
};

const getOccupyData = (page: any, search: any) => {
  data.formData = Object.assign(data.formData, {
    operatorTotalId: id,
    chargeSeqGroup: '1',
  });
  pagingOperaOccupy(data.formData, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getOccupyData(page, search);
        return;
      }
      nextTick(() => {
        tableOccupyRef.value.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
};

queryDicByParent({
  listDtos: ['chargeSourceEnum', 'orgType'],
}).then((res: any) => {
  if (res) {
    orderData.columns[10].dic = [...res.chargeSourceEnum];
    occupyData.columns[2].dic = [...res.orgType];
    occupyData.columns[8].dic = [...res.chargeSourceEnum];
  }
});

queryOrgConfig({ id }).then((res: any) => {
  if (res) {
    data.companyData = res;
  } else {
    data.companyData = {};
  }
});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/head.scss';
@import './index.scss';
.company-info {
  background: #c6e2ff;
  display: flex;
  padding: 10px;
  margin-top: 10px;
  .info-item {
    font-size: 14px;
    line-height: 28px;
    margin: 0 20px;
  }
}

// .tabs {
//   display: flex;
//   height: 32px;
//   .tab-item {
//     font-size: 13px;
//     color: #5073f7;
//     padding: 6px 16px;
//     border: 1px solid #c4c4c4;
//     border-left: 0;
//     text-align: center;
//     cursor: pointer;
//     &:first-child {
//       border-radius: 8px 0px 0px 8px;
//       border-left: 1px solid #c4c4c4;
//     }
//     &:last-child {
//       border-radius: 0px 8px 8px 0px;
//     }
//   }
//   .active {
//     background: #e5e8f6;
//   }
// }

// .card {
//   padding: 30px 0;
//   margin: 20px 0;
//   .card-content {
//     width: 100%;
//     .card-data {
//       .card-item {
//         display: flex;
//         .card-title {
//           margin-left: 12px;
//           font-size: 13px;
//           font-weight: 700;
//           line-height: 20px;
//           margin-top: 2px;
//         }
//         .iconfont {
//           font-size: 56px;
//         }
//       }
//     }
//   }
// }

// .card {
//   padding: 30px 0;
//   margin: 20px 0;

//   .card-content {
//     width: 100%;

//     .card-data {
//       .card-item {
//         display: flex;

//         .title {
//           margin-left: 12px;
//         }

//         .iconfont {
//           font-size: 56px;
//         }
//       }
//     }
//   }
// }
// .line-card {
//   margin: 0 20px;
//   display: flex;
//   justify-content: space-between;
//   .right-card {
//     width: 74%;
//     height: 129px;
//     background: linear-gradient(180deg, #5073f7 0%, #2e52db 100%);
//     border-radius: 8px;
//     padding: 10px 0;
//     margin: 20px 0;
//     color: #fff;
//     .dividend-title {
//       .title {
//         font-size: 16px;
//         font-weight: 500;
//         text-align: center;
//         margin-bottom: 10px;
//       }
//     }
//     .charge-data {
//       .charge-data-item {
//         display: flex;
//         justify-content: space-around;
//         // text-align: center;
//         // color: #262626;
//         font-size: 12px;
//         line-height: 20px;
//         .charge-info {
//           .title {
//             width: 86px;
//           }
//         }
//       }
//       .charge-data-item1 {
//         margin-top: 10px;
//       }
//     }
//   }
//   .left-card {
//     width: 24%;
//     height: 129px;
//     background: linear-gradient(165.39deg, #d4dbf5 -17.51%, #a4b9ff 89.89%);
//     border-radius: 8px;
//     padding: 10px 0;
//     margin: 20px 0;
//     position: relative;
//     &::after {
//       content: '';
//       position: absolute;
//       top: 0;
//       left: 0;
//       bottom: 0;
//       right: 0;
//       width: 100%;
//       height: 149px;
//       background-image: url(@/assets/images/financial-bg.png);
//       background-repeat: no-repeat;
//       background-size: cover;
//       opacity: 0.2;
//     }

//     .dividend-title {
//       .title {
//         font-size: 16px;
//         font-weight: 500;
//         text-align: center;
//         margin-bottom: 10px;
//         // margin-bottom: 10px;
//       }
//     }
//     .charge-info {
//       color: #262626;
//       font-size: 12px;
//       line-height: 20px;
//       margin: 1px 0;
//       text-align: center;
//     }
//     // .dividend-info {
//     //   display: flex;
//     //   justify-content: space-between;
//     //   padding: 0 20px;
//     //   color: #262626;
//     //   font-size: 12px;
//     //   line-height: 20px;
//     //   margin: 1px 0;
//     //   &:first-child {
//     //     padding-top: 12px;
//     //   }
//     // }
//   }
// }
</style>
  